<template>
  <!-- 鼠标右击显示数据 -->
  <ul
    class="context-menu"
    :style="{
      left:left + 'px',
      top: top + 'px'
    }"
  >
    <li @click="del()">删除</li>
    <li @click="copy()">复制并粘贴</li>
  </ul>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  props: ['left', 'top'],
  data () {
    return {}
  },
  methods: {
    ...mapActions(['addActiveCom', 'removeActiveCom']),

    // 拷贝
    copy () {
      this.copyActiveCom(this.activeCom)
    },

    // 粘贴
    paste () {
      let currentCom = this.activeCopy
      // 随机生成名字
      currentCom.name = currentCom['type'] + new Date().getTime()
      // 新增组件到面板，并设置为激活组件
      this.addActiveCom(currentCom)
    },

    // 删除
    del () {
      this.removeActiveCom({
        activeName: this.activeCom.name,
        pageComponents: this.components[0]
      })
    }
  },
  mounted () { }
}
</script>

<style lang="less" scoped>
.context-menu {
  position: absolute;
  width: 150px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  z-index: 9999;
  li {
    padding: 10px;
    cursor: pointer;
    &:hover {
      background: #3b98f2;
      color: #fff;
    }
  }
}
</style>
